<template>
  <div class="index">
    <hz-header>
      <div class="banner-wrap phone-only">
        <swiper :options="swiperOption" ref="mySwiper" v-if="bannerList.length > 0">
          <swiper-slide v-for="(item,index) in bannerListM" :key="index">
            <img :src="item" alt="">
          </swiper-slide>
        </swiper>
      </div>
    </hz-header>
    <div class="banner-wrap pc-only">
      <swiper :options="swiperOption" ref="mySwiper" v-if="bannerList.length > 0">
        <swiper-slide v-for="(item,index) in bannerList" :key="index">
          <img :src="item" alt="">
        </swiper-slide>
      </swiper>
      <div class="button-next" @click="nextPage()"></div>
      <div class="button-prev" @click="prevPage()"></div>
      <!-- <div class="swiper-pagination"></div> -->
    </div>
    <div class="main">
      <!-- <product-module v-show="isShowPM"></product-module> -->
      <div class="view" :class="{'no-pm': !isShowPM}">
        <router-view></router-view>
      </div>
    </div>
    <hz-footer></hz-footer>
  </div>
</template>

<script>
  import hzHeader from 'COMPS/hz-header.vue'
  import hzFooter from 'COMPS/hz-footer.vue'
  import productModule from 'COMPS/product-module.vue'

  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  import 'swiper/dist/css/swiper.css'

  export default {
    name: 'index',
    components: {
      hzHeader,
      hzFooter,
      productModule,
      swiper,
      swiperSlide,
    },
    data() {
      return {
        bannerList: [
          'http://47.96.24.193/dist/banner-pc-1.png'
        ],
        bannerListM: [
          'http://47.96.24.193/dist/banner-phone-1.png'
        ],
        swiperOption: {
          loop: true,
          observer:true,
          observeParents:true,
          autoplay: {
            delay: 5000,
            disableOnInteraction: false, 
          },
          navigation: {
            nextEl: '.swiper-button-next', //前进按钮的css选择器或HTML元素。
            prevEl: '.swiper-button-prev', //后退按钮的css选择器或HTML元素。
            hideOnClick: true, //点击slide时显示/隐藏按钮
            disabledClass: 'my-button-disabled', //前进后退按钮不可用时的类名。
            hiddenClass: 'my-button-hidden', //按钮隐藏时的Class
          },
          // pagination: {
          //   el: '.swiper-pagination',
          //   type: 'bullets',
          // }
        }
      }
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper;
      },
      isShowPM() {
        return -1 == this.$route.path.indexOf('news-detail') && -1 == this.$route.path.indexOf('message-board');
      }
    },
    methods: {
      nextPage() {
        this.swiper.slideNext();
      },
      prevPage() {
        this.swiper.slidePrev();
      }
    }
  }
</script>

<style lang="less">
  @import '~COMMON/common.less';

  .index {
    width: 1200px;
    margin: 0 auto;
    .On-xs({
      // max-width: 640px;
      width: 100%;
      overflow: hidden;
    });
    .banner-wrap {
      position: relative;
      .swiper-container  {
        height: 360px;
        width: 100%;
        img {
          width: 100%;
          height: 100%;
        }
        .On-xs({
          height: 180px;
        });
      }
      // .swiper-button-prev
      // .swiper-button-next {
      //   &:focus {
      //     outline: none;
      //   }
      // }
      .button-prev, 
      .button-next {
        cursor: pointer;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 26px;
        height: 40px;
        background-size: 100%;
        z-index: 999;
      }
      .button-prev {
        left: 150px;
        background-image: url(~IMGS/swiper-left.png);
        &:hover {
          background-image: url(~IMGS/swiper-left-active.png);
        }
      }
      .button-next {
        right: 150px;
        background-image: url(~IMGS/swiper-right.png);
        &:hover {
          background-image: url(~IMGS/swiper-right-active.png);
        }
      }
      // .swiper-pagination {
      //   left: 50%;
      //   bottom: 0px;
      //   transform: translateX(-50%);
      //   .swiper-pagination-bullet {
      //     margin-right: 10px;
      //   }
      // }
    }
    .main {
      box-sizing: border-box;
      width: 100%;
      margin: 0 auto;
      padding: 40px 20px 50px 20px;
      background-color: #fff;
      .view {
        // width: 880px;
        width: 100%;
        // margin-left: 25px;
        display: inline-block;
        vertical-align: top;
        &.no-pm {
          width: 100%;
          margin-left: 0px;
        }
      }
      .On-xs({
        padding: 0 15px;
        padding-bottom: 30px;
        .view {
          width: 100%;
          margin: 0px;
        }
      });
    }
  }
</style>